<template>
	<div>
		<SearchHeader :search="search"
									@handlerSearch="handlerSearch"
									@searchRemoteMethod="searchRemoteMethod">
		</SearchHeader>
		<TableCom
			ref="tableCom"
			url="/getUserList"
			:tableColumns="tableColumns"
			:tableOperate="tableOperate"
			:isTableIndex="true"
			:isSelection="true"
			:operateWidth="600"
			@handlerOperate="handlerOperate"
			@handlerTable="handlerTable"
			@handlerPutRows="handlerPutRows"
		>
		</TableCom>
	</div>
</template>
<script>
import datePickerEnum from '@/components//SearchHeader/datePickerEnum';

export default {
	data () {
		return {
			search : {
				loading : false, // 搜索按钮loading,防止重复点击
				form : [ // select text data类型和element 一致
					{
						type : 'select', // 输入类型
						label : '商户编号:', // 标题
						placeholder : '请选择商户编号', // 辅助提示
						key : 'merchantCode', // 一般是对应接口的key
						remote : true, // 开启远程搜索
						options : [] // select下拉列表
					},
					{
						type : 'text',
						label : 'UID:',
						placeholder : '请输入UID',
						key : 'uid'
					},
					{
						type : 'text',
						label : '客户姓名:',
						placeholder : '请输入客户姓名',
						key : 'customerName'
					},
					{
						type : datePickerEnum.data,
						label : '时间:',
						placeholder : '请选择时间',
						key : 'dateTime'
					},
					{
						type : datePickerEnum.daterange,
						label : '时间:',
						key : 'daterange'
					},
					{
						type : 'select',
						label : '产品名称:',
						placeholder : '请选择产品名称',
						key : 'product',
						options : [
							{
								value : '选项1',
								label : '黄金糕'
							},
							{
								value : '选项2',
								label : '双皮奶'
							},
							{
								value : '选项3',
								label : '蚵仔煎'
							},
							{
								value : '选项4',
								label : '龙须面'
							},
							{
								value : '选项5',
								label : '北京烤鸭'
							}
						]
					}
				],
				operates : [
					{
						type : 'search', // 事件处理时用到
						color : 'primary', // 颜色
						icon : 'el-icon-search', // 图标
						name : '查询' // 按钮文字
					}
				]
			},
			tableColumns : [
				// 表头
				{ name : '决策流编码', key : 'processCode' },
				{ name : '决策流名称', key : 'processName'  },
				{
					name : '决策流描述', // 列名
					key : 'processDesc', // 渲染的key和接口一致
					tip : true , // 子数比较多展示...,hover时展示所有
					event : { type : 0 } // 表格点击的处理
				}
			],
			tableOperate : [
				// 操作
				{ name : '提交审核', type : 0, color : 'warning', role : [] },
				{ name : '配置流程', type : 1, color : 'primary', role : [] },
				{ name : '查看线上', type : 2, color : '', role : [] },
				{ name : '编辑', type : 3, color : 'success', role : [] },
				{ name : '删除', type : 4, color : 'danger', role : [] },
				{ name : '版本下线', type : 5, color : 'warning', role : [] },
				{
					name : '操作日志', // 按钮名称
					type : 6, // 标识
					color : 'info', // 颜色
					role : [] // 权限
				}
			],
			dialogForm : [
				{
					type : 'text', // input 类型
					label : '决策流编码', // 标题
					placeholder : '请输入决策流编码', // 辅助提示
					key : 'processCode', // 一般是对应接口的key
					maxlength : 8, // 长度限制
					rules : [ // 验证element 一致
						{ required : true, message : '请输入决策流编码', trigger : 'blur' }
					]
				},
				{
					type : 'text',
					label : '决策流名称',
					placeholder : '请输入决策流名称',
					key : 'processName',
					maxlength : 10,
					rules : [
						{ required : true, message : '请输入决策流名称', trigger : 'blur' }
					]
				},
				{
					type : 'date',
					placeholder : '请选择时间',
					label : '时间:',
					key : 'dateTime',
					rules : [{ required : true, message : '请选择时间', trigger : 'blur' }]
				},
				{
					type : 'daterange',
					label : '时间:',
					key : 'daterange',
					rules : [{ required : true, message : '请选择时间', trigger : 'blur' }]
				},
				{
					type : 'radio',
					label : '特殊资源:',
					placeholder : '请选择特殊资源',
					key : 'resource',
					options : [
						{
							value : 0,
							label : '线上品牌商赞助'
						},
						{
							value : 1,
							label : '线下场地免费'
						}
					],
					rules : [
						{ required : true, message : '请选择特殊资源', trigger : 'blur' }
					]
				},
				{
					type : 'checkbox',
					label : '活动性质:',
					placeholder : '请选择活动性质',
					key : 'type',
					options : [
						{
							value : 0,
							label : '地推活动'
						},
						{
							value : 1,
							label : '线下主题活动'
						}
					],
					rules : [
						{
							type : 'array',
							required : true,
							message : '请选择活动性质',
							trigger : 'blur'
						}
					]
				},
				{
					type : 'select',
					label : '产品名称:',
					placeholder : '请选择产品名称',
					key : 'product',
					options : [
						{
							value : '选项1',
							label : '黄金糕'
						},
						{
							value : '选项2',
							label : '双皮奶'
						},
						{
							value : '选项3',
							label : '蚵仔煎'
						},
						{
							value : '选项4',
							label : '龙须面'
						},
						{
							value : '选项5',
							label : '北京烤鸭'
						}
					],
					rules : [
						{ required : true, message : '请选择产品名称', trigger : 'blur' }
					]
				},
				{
					type : 'textarea',
					label : '决策策流描述',
					placeholder : '请输入决策流描述',
					key : 'processDesc'
				}
			]
		};
	},
	methods : {
		// TableCom组件表格点击
		handlerTable (event, data) {
			console.log('表格点击', event, data);
		},
		// SearchHeader组件搜索
		handlerSearch (types, data) {
			this.search.loading = true;
			this.$refs.tableCom.fetchData(
				{
					pageNum : 1,
					pageSize : 100
				},
				data,
				() => {
					this.search.loading = false;
				}
			);
		},
		// SearchHeader组件远程搜索数据处理
		searchRemoteMethod (key, callback) {
			callback([{ label : 1, value : 1 }]);
		},
		// dialogForm组件提交
		handlerUpdate (parameMap, callback) {
			console.log(parameMap);
			setTimeout(() => {
				callback();
			}, 3000);
		},
		// TableCom组件 操作项
		handlerOperate (operateItem, data) {
			console.log('操作点击', operateItem, data);
			switch (Number(operateItem.type)) {
			case 0:
				break;
			case 1:
				break;
			case 2:
				break;
			case 3:
				this.$dialogForm.open({
					config : {
						title : '编辑' // 标题
					},
					disabledAll : false, // 是否禁用
					dialogForm : this.dialogForm, // 渲染dialog
					handlerFn : this.handlerUpdate, // 事件处理
					result : { // 回显数据
						processCode : '000001',
						type : 0

					}
				});
				break;
			case 4:
			case 5:
				break;
			case 6:
				break;
			}
		},
		// TableCom组件 全选/反选
		handlerPutRows (rows){
			console.log(rows);
		}
	}
};
</script>
<style lang="scss" scoped></style>
